<template>
  <view class="eventDetails-page">
    <head-box></head-box>
    <view class="eventDetails-page-swiper">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              :indicator-dots="true"
              indicator-active-color="#FFFFFF"
              :circular="true"
              :autoplay="true"
              :interval="3000"
              :duration="1500"
            >
              <swiper-item v-for="(k, v) in details && details.list" :key="v">
                <view class="swiper-item">
                  <image class="_item-img" :src="k.url" mode=""></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>

    <view class="eventDetails-page-main">
      <view class="_main-header">
        <view>{{ details && details.moveTitle }}</view>
        <view class="dv">
          <text class="stitle">活动主办方：{{ details && details.moveOrg }}</text>
          <view class="db">
            <view class="pageviews">
              <image src="../../static/img/borwer.png"></image>
              <text class="t1">浏览量</text> <text>{{ pageviews || 0 }}</text>
            </view>
            <view class="share">
              <view class="_img" @tap="onShare">
                <image class="icon" src="/static/other/982daed473d873c994815346398149c.png"></image>
                去分享
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="_main-time">
        <view class="time">
          <view class="start">
            <view class="info">
              <view class="label">开抢时间</view>
              <view class="value">{{ details && details.datestartTime }}</view>
            </view>
            <view class="info">
              <view class="label">结束时间</view>
              <view class="value"> {{ details && details.dateendTime }}</view>
            </view>
          </view>
          <view class="end">
            <!--  <text class="end-o"
                  :class="[isWhetherToEnd.start === -1 ? 'status1' : isWhetherToEnd.start === 1 ? 'status2':'status3']"
            >
              <text class="end-t"
              >{{isWhetherToEnd.value}}</text>
            </text> -->

            <text class="end-o" :class="isWhetherToEnd.cls">
              <text class="end-t">{{ isWhetherToEnd.name }}</text>
            </text>
          </view>
        </view>
        <view class="points consumption" v-if="details && details.needConsumeScore !== 1">
          该福利需要消耗积分：{{ details && details.consumeScore }}
        </view>
      </view>
      <view class="_main-time-hr"></view>
    </view>
    <view class="main-content">
      <div class="left">
        <view class="label"
          ><i class="i"></i><span class="a">兑换时间</span
          ><span>{{ details && details.startTime }}~{{ details && details.endTime }}</span>
        </view>
        <view class="label"
          ><i class="i"></i><span class="a">兑换地址</span>
          <span>{{ details && details.moveAddr }}</span></view
        >
        <view class="label"
          ><i class="i"></i><span class="a">兑换方式</span
          ><span>{{ details && details.sendType===1?'邮寄':'线下' }}</span></view
        >
        <view class="label"
          ><i class="i"></i><span class="a">联系方式</span
          ><span
            class="_main-box-info-val"
            style="color: #ff8e50"
            @click="call(details.linkMobile)"
            >{{ details && details.linkMobile }}</span
          ></view
        >
        <view class="label"
          ><i class="i"></i><span class="a">联系人</span
          ><span style="color: #ff8e50">{{ details && details.linkName }}</span></view
        >
        <view class="_main-box-info w50">
          <view class="_main-box-info-label">
            <i class="i"></i>
            <span class="a">可参与人数</span>
          </view>
          <view class="_main-box-info-val" v-if="details && details.moveNum">
            <text class="_val">{{ details && details.moveNum }}</text
            >人
          </view>
          <view class="_main-box-info-val" v-else>
            <text class="_val">不限人数</text>
          </view>
          <view class="_main-box-info-pic" style="display: none">
            <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
            <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
            <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
            <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
          </view>
        </view>

        <view class="_main-box-info w50" style="position: relative">
          <view class="_main-box-info-label">
            <i class="i"></i>
            <span class="a">已报名人数</span>
          </view>
          <view class="_main-box-info-val"
            ><text class="_val">{{ details && details.personNumber }}</text
            >人
          </view>
          <view class="_main-box-info-pic" style="display: none">
            <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
            <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
            <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
            <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
          </view>
        </view>
      </div>

      <div class="right" v-if="details && details.sendType !== 1">
        <div class="image" @click="onPosConfigs">
          <image src="/static/img/position.png" mode=""></image>
        </div>
      </div>
    </view>

    <view class="main-content-hr"></view>
    <view class="tab-botton">
      <view class="_main-tab-box"> <text>详情</text> </view>
      <view class="hr"></view>
      <view class="_main-content">
        <u-parse :html="details && details.moveDesc" v-if="details && details.moveDesc"></u-parse>
        <u-empty text="暂无活动详情" mode="list" v-else></u-empty>
      </view>
      <view class="count-down" v-if="isTimestampDuration > 0">
        <text>距开抢还剩：</text>
        <u-count-down
          :timestamp="isTimestampDuration"
          :separator="isTimestampDuration > 86400 ? 'zh' : 'colon'"
          separator-size="24"
          color="#fff"
          bg-color="#297AEC"
          border-color="#297AEC"
        ></u-count-down>
      </view>
      <view class="btns">
        <!-- <button :class="[isWhetherToEnd.start === -1 ? 'status1' : isWhetherToEnd.start === 1 ? 'status2':'status3']" @click="onDuration( isWhetherToEnd.start )"><text>
						<text class="end-o" :class="isWhetherToEnd.cls">
							<text class="end-t">{{isWhetherToEnd.name}}</text>
						</text>
					</view>
				</view>
				<view class="points consumption" v-if="details&&details.needConsumeScore!==1">
					该福利需要消耗积分：{{details&&details.consumeScore}} </view>
			</view>
			<view class="_main-time-hr"></view>
		</view>
		<view class="main-content">
			<div class="left">
				<view class="label"><i class="i"></i><span
						class="a">兑换时间</span><span>{{ details&&details.startTime }}~{{ details&&details.endTime }}</span>
				</view>
				<view class="label"><i class="i"></i><span class="a">兑换地址</span>
					<span>{{details&&details.moveAddr}}</span></view>
				<view class="label"><i class="i"></i><span
						class="a">兑换方式</span><span>{{details&&details.exchangeMethod}}</span></view>
				<view class="label"><i class="i"></i><span class="a">联系方式</span><span
						@click="call(details.linkMobile)">{{details&&details.linkMobile}}</span></view>
				<view class="label"><i class="i"></i><span
						class="a">联系人</span><span>{{details&&details.linkName}}</span></view>
				<view class="_main-box-info w50">
					<view class="_main-box-info-label">可参与人数</view>
					<view class="_main-box-info-val" v-if="details&&details.moveNum">
						<text class="_val">{{ details&&details.moveNum}}</text>人
					</view>
					<view class="_main-box-info-val" v-else>
						<text class="_val">不限人数</text>
					</view>
					<view class="_main-box-info-pic" style="display: none">
						<image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
						<image class="_img" src="../../static/img/hmztc.png" mode=""></image>
						<image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
						<image class="_img" src="../../static/img/hmztc.png" mode=""></image>
					</view>
				</view>

				<view class="_main-box-info w50" style="position: relative">
					<view class="_main-box-info-label">已报名人数</view>
					<view class="_main-box-info-val"><text class="_val">{{ details&&details.personNumber }}</text>人
					</view>
					<view class="_main-box-info-pic" style="display: none">
						<image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
						<image class="_img" src="../../static/img/hmztc.png" mode=""></image>
						<image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
						<image class="_img" src="../../static/img/hmztc.png" mode=""></image>
					</view>
				</view>
			</div>

			<div class="right">
				<div class="image" @click="onPosConfigs">
					<image src="/static/img/position.png" mode="" class="icon"></image>
          <view class="distance">距我{{distances}}</view>
				</div>
			</div>
		</view>

		<view class="main-content-hr"></view>
		<view class="tab-botton">
			<view class="_main-tab-box"> <text>详情</text> </view>
			<view class="hr"></view>
			<view class="_main-content">
				<u-parse :html="details&&details.moveDesc" v-if="details&&details.moveDesc"></u-parse>
				<u-empty text="暂无活动详情" mode="list" v-else></u-empty>
			</view>
			<view class="count-down">
				<text>距开抢还剩：</text>
				<u-count-down :timestamp="isTimestampDuration" :separator="isTimestampDuration > 86400 ? 'zh' : 'colon'"
					separator-size="24" color="#fff" bg-color="#297AEC" border-color="#297AEC"></u-count-down>
			</view>
			<view class="btns">
				<button :class="[isWhetherToEnd.start === -1 ? 'status1' : isWhetherToEnd.start === 1 ? 'status2':'status3']" @click="onDuration( isWhetherToEnd.start )"><text>
          {{isWhetherToEnd.value}}
        </text></button> -->

        <button :class="isWhetherToEnd.cls" @click="onDuration(isWhetherToEnd.status)"
          ><text>
            {{ isWhetherToEnd.status == 1 ? isWhetherToEnd.btnName : isWhetherToEnd.name }}
          </text></button
        >
        <u-button @click="onWinners" shape="circle" ripple type="primary"  hover-class="none" class="winners">中奖人类名单</u-button>
      </view>
    </view>

    <tabs-box></tabs-box>
    <u-popup v-model="winnersShow" mode="center" border-radius="14" closeable
             width="75%" height="70%"
    >
      <scroll-view scroll-y="true" style="height: 100%;">
        <view>
          <view v-for="index in 200" :key="index">
            第{{index}}个Item
          </view>
        </view>
      </scroll-view>
    </u-popup>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>
<script>
import {
  getAnalyzeIDCard,
  getWelfareStatus,
} from '@/common/type'
import longpos1 from '@/mixins/longpos-1'
import pointshare from '@/components/point-share/index'
import { addGpMovedate } from '@/api/move'
import { share1 } from '@/mixins/share-1'
import { goLogin } from '@/common/base'
export default {
  mixins: [share1, longpos1],
  components: {
    pointshare,
  },
  data() {
    return {
      infoData: {},//详情数据
      winnersShow:false,//是否展示中奖名单列表
      winnersList:[],//中奖名单列表
    }
  },
  onLoad(options) {
    this.id = options.id
  },
  onShow() {
    // #ifdef H5
    console.log('分享')
    this.$wxSetShare()
    // #endif
    //this.isTokenAndInfo()
  },
  computed: {
    //距开抢还剩
    isTimestampDuration() {
      const endTime = this.$moment(this.details?.datestartTime).valueOf()
      const statrTime = this.$moment().valueOf()
      const end = (endTime - statrTime) / 1000
      return end
    },
    //是否可以开启活动
    /**
     * @author 2U
     * @description 通过后台字段dateStatus来判断当前福利活动状态
     * @date {2021.09.01}
     */
    isWhetherToEnd() {
      // return statusIsTimestampDuration({datestartTime:this.details?.datestartTime,dateendTime:this.details?.dateendTime})
      const { dateStatus, moveNum, moveJoinNum } = this.details
      const isFullPeople = moveJoinNum >= moveNum && moveNum > 0 //判断是否 报名人数>总人数
      return getWelfareStatus(dateStatus, isFullPeople)
    },
  },
  methods: {
    isTokenAndInfo() {
      this.getUserInfoValue(result=>{
        console.log ( result )
        if(result){
          this.infoData = result
        }
      })
    },
    //中奖名单列表展示
    onWinners(){
      this.winnersShow=true
    },
    onDuration(day) {
      // if(day===-1){
      //   this.$api.msg(`还未到开抢时间`)
      //   return false
      // } if(day===0){
      //   this.$api.msg('福利活动已结束,请抢其他福利活动')
      //   return false
      // } if(!this.isBtnMoveJoinNum){
      //   this.$api.msg('预约人数已满')
      //   return false
      // }

      //   if (!this.isBtnMoveJoinNum) {
      //     return this.$api.msg('预约人数已满')
      //   }

      const dics = {
        3: '福利活动已结束,请抢其他福利活动',
        4: '预约未开始',
        5: '预约已结束',
      }

      if (dics[day]) {
        returnthis.$api.msg(dics[day])
      }
      //isNeedFile 0表示不用上传  1需要上传
      if(!this.details.isNeedFile){
        this.addGpMovedateOp()
      } else {
        this.$api.handleMenu(
            `/pages/activityReservation/activityReservation?id=${this.id}&isNeedFile=${this.details.isNeedFile}`
        )
      }

    },
    //开始预约活动了
    addGpMovedateOp() {
      if (this.$store.state.token) {
        const { userPname, userPhone, userPid, userCareer } = this.$store.state.userInfo
        const params = {
          moveId: this.id,
          userPname,
          userPhone,
          userPid,
          userCareer,
          userSex: getAnalyzeIDCard(userPid).sex,
        }
        this.$api.showLoading({
          title: '抢单中...',
        })
        addGpMovedate(params).then((res) => {
          if (res.code === 200) {
            this.$api.hideLoading()
            this.$api.msg(res.result)
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/welfareActivities/welfareActivities',
              })
            }, 1000)
          } else {
            this.$api.msg(res.message)
            // this.onTokenCbStorageSync(k=>{
            //   if(k){
            //      this.$api.handleMenu('/pages/welfareActivities/welfareActivities')
            //   }
            // })
          }
        })
      }
      else{
        goLogin()
      }
    },
    // 拨打号码
    call(phone) {
      this.$api.makePhoneCall(phone)
    },
  },
}
</script>

<style lang="scss">
.eventDetails-page {
  width: 100%;
  background-color: rgba(248, 248, 249, 1);

  .eventDetails-page-swiper {
    width: 100%;
    height: 500rpx;
    border-radius: 30rpx 30rpx 0 0;

    .uni-padding-wrap {
      height: 100%;
    }

    .page-section-spacing {
      height: 100%;
    }

    .swiper {
      height: 100%;
      padding: 10rpx;

      .swiper-item {
        width: 100%;
        height: 100%;

        ._item-img {
          width: 100%;
          height: 100%;
          border-radius: 30rpx;
        }
      }
    }
  }

  .eventDetails-page-main {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
    background-color: #fff;

    ._main-header {
      width: 100%;
      border-bottom: 1px solid #eeeeee;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 80rpx;
      padding-bottom: 30rpx;
      position: relative;

      .stitle {
        font-size: 24rpx;
        line-height: 24rpx;
        display: block;
        font-weight: normal;
        color: #999;
      }

      .dv {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .db {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        .pageviews {
          padding-right: 30rpx;
          display: flex;
          align-items: center;

          image {
            width: 28rpx;
            height: 20rpx;
          }

          text {
            font-size: 20rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #999999;
          }

          .t1 {
            padding: 0 6rpx 0 8rpx;
          }
        }
      }

      .share {
        width: 139rpx;
        white-space: nowrap;
        height: 49rpx;
        line-height: 49rpx;
        padding: 0 20rpx;
        font-size: 24rpx;
        text-align: right;
        background: #ff5f5f;
        background-image: linear-gradient(to right, #ff6850, #ff5f5f);
        font-weight: normal;
        color: #fff;
        border-radius: 40rpx 40rpx 40rpx 0;
      }

      ._img {
        height: 100%;

        .icon {
          width: 25rpx;
          height: 25rpx;
          margin-right: 10rpx;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    ._main-time {
      .time {
        display: flex;
        justify-content: space-between;
        padding: 36rpx 0 0 39rpx;

        .start {
          display: flex;
          justify-content: space-between;
          width: 65%;

          .label {
            width: 129rpx;
            height: 21rpx;
            font-size: 26rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            position: relative;
            white-space: nowrap;

            &:after {
              content: '';
              position: absolute;
              left: -20rpx;
              top: 15rpx;
              width: 8rpx;
              height: 8rpx;
              border-radius: 50%;
              overflow: hidden;
              background: #a4a4a4;
            }
          }

          .value {
            white-space: nowrap;
            width: auto;
            height: 16rpx;
            font-size: 26rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #888888;
            line-height: 40rpx;
            padding: 19rpx 0 28rpx 0;
            padding-right: 20rpx;
          }
        }

        .end {
          width: 35%;
          text-align: right;
          flex: 1;

          .end-o {
            width: 104rpx;
            height: 29rpx;
            //background: #ffa800;
            //border: 1px solid #ffa800;
            border-radius: 14rpx;

            .end-t {
              padding: 6rpx 26rpx;
              width: 52rpx;
              height: 18rpx;
              font-size: 18rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #ffffff;
              line-height: 44rpx;
            }
          }
        }
      }

      .points {
        white-space: nowrap;
        width: auto;
        font-size: 26rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #ffa800;
        line-height: 40rpx;
        padding: 28rpx 0 23rpx 34rpx;
      }

      .consumption {
      }
    }

    ._main-time-hr {
      border-bottom: 6rpx solid #eeeeee;
      padding-bottom: 30rpx;
    }
  }

  .main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 43rpx 0 39rpx;

    .left {
      .label {
        .i {
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          overflow: hidden;
          background: #a4a4a4;
          display: inline-block;
        }

        span {
          padding-left: 24rpx;
          width: auto;
          height: 16rpx;
          font-size: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #888888;
          line-height: 40rpx;
        }

        .a {
          height: 21rpx;
          // font-size: 22rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #333333;
          line-height: 40rpx;
          padding-left: 19rpx;
        }

        padding-bottom: 29rpx;

        &:first-child {
          padding-top: 34rpx;
        }
      }
    }

    .right {
      .image {
        display: inline-block;
        background: #eef4ffff;
        border-radius: 50%;
        width: 61rpx;
        height: 61rpx;
        line-height: 70rpx;
        text-align: center;

        image {
          display: inline-block;
          vertical-align: middle;
          width: 35rpx;
          height: 35rpx;
        }
      }
    }
  }

  .main-content-hr {
    border-bottom: 13rpx solid #eee;
  }

  .tab-botton {
    ._main-tab-box {
      text-align: center;

      text {
        width: 58rpx;
        height: 29rpx;
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #ff3d5c;
        line-height: 44rpx;
        position: relative;

        &:after {
          position: absolute;
          content: '';
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 37rpx;
          height: 5rpx;
          background: #ff3d5c;
          border-radius: 2rpx;
        }
      }
    }

    .hr {
      width: 100%;
      height: 2rpx;
      background: #eeeeee;
      margin-top: 2rpx;
    }

    ._main-content {
      padding: 36rpx;
      height: 100%;
      font-size: 28rpx;
      font-family: PingFang;
      font-weight: 400;
      color: #666666;
      line-height: 50rpx;
      overflow: hidden;
      overflow-y: scroll;
      color: #303133;
    }

    .count-down {
      text-align: center;
      padding-top: 54rpx;
      padding-bottom: 51rpx;

      text {
        width: 149rpx;
        height: 27rpx;
        font-size: 28rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #222222;
        line-height: 50rpx;
      }

      /deep/.u-countdown {
        .u-countdown-time {
          padding: 9rpx 10rpx 13rpx 9rpx;
        }

        .u-countdown-colon {
          margin: 0 9rpx 0 14rpx;
          width: 4rpx;
          height: 14rpx;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #222222;
          line-height: 50rpx;
        }
      }
    }

    .btns {
      width: 100%;

      box-sizing: border-box;
      padding: 10rpx 40rpx;
      padding-bottom: 63rpx;

      .status1,
      .status2,
      .status3 {
        font-size: 30rpx;
        border-radius: 40rpx;
        color: #fff;
        //background-color: #2678eb;
        //background-image: linear-gradient(#569cff, #2678eb);
        border: none;
      }

      .status1,
      .status2,
      .status3 {
        width: auto;
        height: 74rpx;
        border-radius: 37rpx;

        text {
          width: 83rpx;
          height: 27rpx;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #ffffff;
          line-height: 50rpx;
        }
      }
    }
  }
}

.status1 {
  background: $status3f8fee;
  border: transparent;
}

.status2 {
  background: $statusffa800;
  border: 1px solid $statusffa800;
}

.status3 {
  background: $statusecff700;
  border: transparent;
}

._main-box-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 26rpx;
  color: #8f8f94;
  // padding-left: 16rpx;
  box-sizing: border-box;

  ._main-box-info-label {
    color: #000;
    position: relative;
    font-size: 26rpx;

    .i {
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      overflow: hidden;
      background: #a4a4a4;
      display: inline-block;
    }
    .a {
      padding-left: 19rpx;
    }
  }

  // ._main-box-info-label::after {
  //   content: '';
  //   position: absolute;
  //   left: -20rpx;
  //   top: 15rpx;
  //   width: 8rpx;
  //   height: 8rpx;
  //   border-radius: 50%;
  //   overflow: hidden;
  //   background: #a4a4a4;
  // }

  ._main-box-info-val {
    color: #888;
    margin-top: 10rpx;
    padding-bottom: 29rpx;
  }

  ._position {
    position: absolute;
    top: 10rpx;
    right: 5%;
    display: inline-block;
    background: #eef4ffff;
    border-radius: 50%;
    width: 70rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;

    .icon {
      display: inline-block;
      vertical-align: middle;
      width: 25rpx;
      height: 31rpx;
    }
  }
}

.w50 {
  width: 50%;
  display: inline-block;
  position: relative;

  ._main-box-info-val {
    color: #ff8e50;
    font-size: 10rpx;

    ._val {
      font-size: 30rpx;
      padding-left: 19rpx;
    }
  }

  ._main-box-info-pic {
    position: absolute;
    bottom: 0;
    left: 60%;

    ._img {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      display: inline-block;
      margin-left: -10rpx;
    }
  }
}
.winners{
  margin:30rpx 0;
}
</style>
